<template>
  <div class="number_menu">
    <div>
      <el-button @click="handleClick" v-for="i in 7" :key="i">
        <span class="music-font">{{ LLNote[`Note${i}`] }}</span>
      </el-button>
    </div>
    <div>
      <el-button @click="handleClick" v-for="i in 7" :key="i">
        <span class="music-font">{{ LNote[`Note${i}`] }}</span>
      </el-button>
    </div>
    <div>
      <el-button @click="handleClick" v-for="i in 7" :key="i">
        <span class="music-font">{{ Note[`Note${i}`] }}</span>
      </el-button>
    </div>
    <div>
      <el-button @click="handleClick" v-for="i in 7" :key="i">
        <span class="music-font">{{ HNote[`Note${i}`] }}</span>
      </el-button>
    </div>
    <div>
      <el-button @click="handleClick" v-for="i in 7" :key="i">
        <span class="music-font">{{ HHNote[`Note${i}`] }}</span>
      </el-button>
    </div>
    <canvas ref="canvasEl" :width="width" :height="height"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { LLNote, LNote, Note, HNote, HHNote } from '../../utils/MusicNoteEnums';
// 定义一个数组，存储数字

interface NoteConfig {
  x: number;
  y: number;
  value: string;
  octave: number;
}

const canvasEl = ref<HTMLCanvasElement | null>(null);
const config = reactive({
  fontSize: 24,
  noteSpacing: 40,
  dotRadius: 1.5,
  verticalOffset: 5,
  baselineY: 24 + 20,
  font: 'bold "Courier New", monospace',
});

const width = 800;
const height = 400;

const initCanvas = (ctx: CanvasRenderingContext2D) => {
  const dpr = window.devicePixelRatio || 1;
  if (canvasEl.value) {
    // 保持原有缩放逻辑
    canvasEl.value.style.width = `${width}px`;
    canvasEl.value.style.height = `${height}px`;
    canvasEl.value.width = width * dpr;
    canvasEl.value.height = height * dpr;
    ctx.scale(dpr, dpr);

    // 新增：缩放后重置字体（重要！）
    ctx.font = `${config.fontSize}px "Courier New", monospace`;
  }
};

const drawDot = (ctx: CanvasRenderingContext2D, x: number, y: number) => {
  ctx.beginPath();
  ctx.arc(x, y, config.dotRadius, 0, Math.PI * 2);
  ctx.fill();
};

const drawJianpuNote = (ctx: CanvasRenderingContext2D, x: number, y: number, value: string, octave: number = 0) => {
  ctx.fillText(value, x, y);
  const textWidth = ctx.measureText(value).width;
  const dotX = x + textWidth / 2;

  if (octave !== 0) {
    const dotCount = Math.abs(octave);
    const direction = octave > 0 ? -1 : 1;
    const baseOffset = config.verticalOffset;
    const fontSize = config.fontSize;

    for (let i = 0; i < dotCount; i++) {
      const dotY =
        direction < 0
          ? y + direction * (fontSize / 2 + 2 + baseOffset + i * baseOffset)
          : y + direction * (baseOffset + i * baseOffset);
      drawDot(ctx, dotX, dotY);
    }
  }
};

onMounted(() => {
  if (canvasEl.value) {
    const ctx = canvasEl.value.getContext('2d');
    if (ctx) {
      ctx.font = `${config.fontSize}px "Courier New", monospace`;
      initCanvas(ctx);

      // 示例绘制
      const notes: NoteConfig[] = [
        { x: 40, y: config.baselineY, value: '1', octave: -1 },
        { x: 60, y: config.baselineY, value: '2', octave: 1 },
        { x: 80, y: config.baselineY, value: '3', octave: 0 },
        { x: 100, y: config.baselineY, value: '5', octave: -2 },
        { x: 120, y: config.baselineY, value: '5', octave: 2 },
        { x: 140, y: config.baselineY, value: '5', octave: 2 },
        { x: 160, y: config.baselineY, value: '5', octave: 2 },
        { x: 180, y: config.baselineY, value: '5', octave: 2 },
      ];

      notes.forEach((note) => drawJianpuNote(ctx, note.x, note.y, note.value, note.octave));
    }
  }
});
</script>

<style scoped>
.number_menu {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: red;
}

canvas {
  border: 1px solid #ccc;
  margin: 20px;
}
</style>
